<template>
    <div>
        <el-dialog title="报名信息" :close-on-click-modal="false" :visible.sync="visible">
            <div style="display:flex;justify-content:space-between;align-item:center;margin-bottom:10px;">
                <div>
                    <span style="padding-bottom:6px;margin-right:20px;cursor: pointer"
                          :class="parseInt(tabIndex) === 0?'under-line':''" @click="tabChange(0)">已报名</span>
                    <span style="padding-bottom:6px;cursor: pointer" :class="parseInt(tabIndex) === 1?'under-line':''"
                          @click="tabChange(1)">未报名</span>
                </div>
                <el-button type="primary" icon="el-icon-download" @click="handleDownload" :loading="loading">
                    导出
                </el-button>
            </div>
            <el-table :data="dataList" row-key="id" border v-loading="dataListLoading" style="width: 100%;"
                      max-height="500">
                <el-table-column type="index" header-align="center" align="center" label="序号" width="50px"/>
                <el-table-column prop="realname" header-align="center" align="center" label="姓名"/>
                <el-table-column prop="gender" header-align="center" align="center" label="性别">
                    <template slot-scope="scope">{{scope.row.gender===2?'女':'男'}}</template>
                </el-table-column>
                <el-table-column prop="deptName" header-align="center" align="center" label="部门"/>
                <!--<el-table-column prop="workTypes" header-align="center" align="center" label="岗位/工种">
                    <template slot-scope="scope">
                        <span class="work-types-box" v-for="x in scope.row.workTypes">{{x}}</span>
                    </template>
                </el-table-column>-->
                <el-table-column prop="mobile" header-align="center" align="center" label="电话"/>
                <el-table-column v-if="parseInt(tabIndex) === 0" prop="signUpdTime" header-align="center" align="center"
                                 label="报名时间"/>
                <!--              <el-table-column-->
                <!--                fixed="right"-->
                <!--                header-align="center"-->
                <!--                align="center"-->
                <!--                width="150"-->
                <!--                label="操作">-->
                <!--                <template slot-scope="scope">-->
                <!--                  <el-button type="text">报名</el-button>-->
                <!--                </template>-->
                <!--              </el-table-column>-->
            </el-table>
            <el-pagination
                    @size-change="sizeChangeHandle"
                    @current-change="currentChangeHandle"
                    :current-page="pageIndex"
                    :page-sizes="[10, 20, 50]"
                    :page-size="pageSize"
                    :total="totalCount"
                    layout="total, sizes, prev, pager, next, jumper"
                    style="margin-top: 10px"
            ></el-pagination>
        </el-dialog>
    </div>
</template>

<script>
  import {treeDataTranslate} from '@/utils'

  export default {
    data () {
      return {
        loading: false,
        visible: false,
        dataForm: {
          key: '',
          trainId: '',
          deptId: '',
          mobile: '',
          realname: ''
        },
        deptListTreeProps: {
          checkStrictly: true,
          expandTrigger: 'hover',
          label: 'name',
          value: 'id',
          children: 'children',
          emitPath: false
        },
        deptList: [], // 部门
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        dataListLoading: false,
        addOrUpdateVisible: false,
        tabIndex: 0
      }
    },
    methods: {
      init (id) {
        this.visible = true
        this.dataForm.trainId = id
        this.tabChange(this.tabIndex)
        this.$http({
          url: this.$http.adornUrl('/usercenter-admin/dept/select'),
          method: 'post'
        }).then(data => {
          for (let i = 0; i < data.data.length; i++) {
            if (data.data[i].deptId === -1) {
              data.data.splice(i, 1)
            }
          }
          this.deptList = data.data
          // this.deptList = this.deptList.splice(0, 1)
          this.deptList = treeDataTranslate(this.deptList, 'id')
        })
      },
      // 获取已报名数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/trainentrystatistics'),
          method: 'post',
          data: {
            page: this.pageIndex,
            limit: this.pageSize,
            trainId: this.dataForm.trainId
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.dataList = res.data.list
            this.totalCount = res.data.totalCount
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 获取未报名数据列表
      getDateList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/train/admin/train/nottrainentrystatistics'),
          method: 'post',
          data: {
            page: this.pageIndex,
            limit: this.pageSize,
            trainId: this.dataForm.trainId,
            realname: this.dataForm.realname,
            deptId: this.dataForm.deptId,
            mobile: this.dataForm.mobile
          }
        }).then(res => {
          if (res && res.code === 200) {
            this.dataList = res.data.list
            this.totalCount = res.data.totalCount
          } else {
            this.dataList = []
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        if (parseInt(this.tabIndex) === 0) {
          this.getDataList()
        } else {
          this.getDateList()
        }
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        if (parseInt(this.tabIndex) === 0) {
          this.getDataList()
        } else {
          this.getDateList()
        }
      },
      // tab切换
      tabChange (val) {
        this.pageIndex = 1
        this.tabIndex = val
        switch (val) {
          case 0:
            // 已报名
            this.getDataList()
            break
          case 1:
            // 未报名
            this.getDateList()
            break
        }
      },

      // 导出
      handleDownload () {
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(`/train/traincourse/getShouldSignUpUserList/${this.dataForm.trainId}`),
          method: 'post'
        }).then(res => {
          this.loading = false
          if (res.data) {
            import('@/vendor/Export2Excel').then(excel => {
              const tHeader = ['姓名', '性别', '部门', '岗位/工种', '电话', '   状态   ', '            备注            ']
              const filterVal = ['realname', 'gender', 'deptName', 'workTypes', 'mobile', 'signUpStatus']
              // const tHeader = ['姓名', '性别', '部门', '电话', '   状态   ', '            备注            ']
              // const filterVal = ['realname', 'gender', 'deptName', 'mobile', 'signUpStatus']
              const data = this.formatJson(filterVal, res.data)
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: '报名表 ' + new Date().toLocaleDateString()
              })
            })
          }
        }).catch(() => {
          this.loading = false
        })
      },
      formatJson (filterVal, jsonData) {
        let data = ''
        data = jsonData.map(v => filterVal.map(j => {
          if (j === 'signUpStatus') {
            return v[j] === 0 ? '已报名' : '未报名'
          } else if (j === 'gender') {
            return v[j] === 2 ? '女' : '男'
          } else if (j === 'workTypes') {
            return v[j] && v[j].length ? v[j] : v['userCraft']
          } else {
            return v[j]
          }
        }))
        return data
      },
      // 工种菜单树选中
      deptListTreeCurrentChangeHandle (data, node) {
        this.dataForm.deptName = data.name
        this.dataForm.deptId = data.id
      },
      // 工种菜单树设置当前选中节点
      deptListTreeSetCurrentNode () {
        this.$refs.deptListTree.setCurrentKey(this.dataForm.deptId)
        this.dataForm.deptName = (this.$refs.deptListTree.getCurrentNode() || {})['name']
      }
    }
  }
</script>

<style scoped>
    .under-line {
        border-bottom: 2px solid #409eff;
        color: #409eff;
    }

    .work-types-box {
        display: inline-block;
        background: rgba(0, 0, 0, .1);
        padding: 0 2px;
        margin: 2px;
        border-radius: 3px;
    }
</style>
